<template>
    <el-dialog v-model="visible" :close-on-click-modal="false"  title="上传文件" width="600">
        <el-upload ref="dayuploadfp" class="upload-demo" accept=".xlsx" :auto-upload="false" drag
            :before-upload="daybeforeUploadfp" :file-list="dayfileList" :on-change="dayonChange"
            :before-remove="daybeforeRemove" action="#" :limit="1" :multiple="false">
            <img src="../../../assets/image/uploadvideo.png" alt="">
            <div class="el-upload__text">
                将文件拖到此处，或<span class="blue">点击上传</span>
            </div>
        </el-upload>
        <div class="hint-box">
            <div class="bold mg-b-20">注意事项</div>
            <div class="mg-b-10">必须填写表头方便后续匹配，也可点击<span class="fc-primary pointer" @click="handleDownload" href="https://bullet001.oss-cn-shanghai.aliyuncs.com/template/excel/dy-performance-template.xlsx">下载数据模板</span>帮助你快速导入</div>
            <div>请核对上传文件首行内容，避免表头错误影响字段匹配</div>
        </div>
        <div v-if="errorList.length" class="error-box mg-b-20">
            <el-alert :title="`本次上传共发现${errorList.length}处错误，请修改后重新上传`" type="error" :closeable="false"/>
            <el-table :data="errorList" stripe style="width: 100%">
                <el-table-column width="80" prop="index" label="行号" />
                <el-table-column prop="msg" label="报错信息" :closable="false"/>    
            </el-table>
        </div>
        <div class="flexendbox">
            <el-button class="my_cancelbtn" @click="handleClose">取消</el-button>
            <el-button class="my_btn" @click="handleConfirm">确定</el-button>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { importBaobaiData } from '@/api/baobai/index.ts'
import { ElMessage } from 'element-plus'


const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits(['update:show', 'refresh'])

const visible = ref(false)
const dayfileList = ref([])

const file = ref(null)

const daybeforeUploadfp = () => {

}

const dayonChange = (uploadFile) => {
    file.value = uploadFile.raw
}

const daybeforeRemove = () => {
    console.log(234)
}

const handleClose = () => {
    visible.value = false
}

const errorList = ref([])

const handleConfirm = () => {
    const params = new FormData()
    params.append('file', file.value as any)
    importBaobaiData(params).then(res => {
        console.log(111, res)
        if (!res.isSuccess) {
            errorList.value = res.errorList
        } else {
            ElMessage.success('上传成功')
            visible.value = false
            emits('refresh')
        }
    })
}

const handleDownload = () => {
    const href = 'https://bullet001.oss-cn-shanghai.aliyuncs.com/template/excel/dy-performance-template.xlsx'
    const a = document.createElement('a')
    a.download = href
    a.href = href
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

const init = () => {
    dayfileList.value = []
    errorList.value = []
}

watch(() => props.show, (newval) => {
    visible.value = newval
})

watch(visible, (newval) => {
    if(!newval) {
        init()
        emits('update:show', false)
    }
})

</script>
<style lang="scss" scoped>
    
</style>